
<template>
  <Modal v-model="visible" title="配置角色">
    <Form
      :model="formItem"
      ref="formValidate"
      :rules="ruleValidate"
      :label-width="120"
    >
      <Form-item label="状态" prop="isAvality">
        <Radio-group v-model="formItem.isAvality">
          <Radio label="有效">有效</Radio>
          <Radio label="无效">无效</Radio>
        </Radio-group>
      </Form-item>
      <Form-item label="备注" prop="explain">
        <Input
          v-model="formItem.explain"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 5 }"
          placeholder="备注"
        />
      </Form-item>
      <slot name="footer"></slot>
    </Form>
    <div slot="footer" class="dialog-footer">
      <Button type="primary" @click="confirm">确定</Button>
      <Button @click="cancel">取消</Button>
    </div>
  </Modal>
</template>

<script>
import { postUserState } from '@/api/system/user.js'
export default {
  name: 'Detail',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    userId: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      formItem: {
        isAvality: '有效',
        explain: ''
      },
      ruleValidate: {
        isAvality: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        explain: []
      }
    }
  },
  methods: {
    confirm () {
      let that = this
      let params = JSON.parse(JSON.stringify(that.formItem))
      params.userID = that.userId
      params.isAvality = params.isAvality === '有效'
      that.$refs['formValidate'].validate((valid) => {
        if (valid) {
          postUserState(params).then((res) => {
            if (res.status === 200) {
              that.$Message.success('配置成功！')
              that.$refs['formValidate'].resetFields()
              that.$emit('closeRolestaticModel')
            } else {
              that.$Message.warning('请求失败，请联系管理员！')
            }
          })
        } else {
          // this.$Message.error('表单验证失败!');
        }
      })
    },
    cancel () {
      this.$emit('closeRolestaticModel')
      this.$refs['formValidate'].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  button:nth-child(1) {
    margin-right: 20px;
  }
}
</style>
